<template>
  <div>
    <div class="comordercontaner">
      <ul class="mui-table-view">
        <li class="mui-table-view-cell mui-media" v-for="(item,index) in proobj" :key="index">
          <a href="javascript:;">
            <img class="mui-media-object mui-pull-left" :src="item.img">
            <div class="mui-media-body">
              {{item.title}}
              <p class="mui-ellipsis">
                <span class="skunumbox fn-clear">
                  <span class="sku">{{item.selectstatus}}</span>
                  <span class="num">×{{$store.getters.getGoodsCount[item.sku_id]}}</span>
                </span>
                <span class="price">￥{{item.zs_price}}</span>
              </p>
            </div>
          </a>
        </li>
      </ul>
      <ul class="mui-table-view">
        <li class="mui-table-view-cell">
          商品总价
          <span class="mui-badge">{{totalprice}}元</span>
        </li>
        <li class="mui-table-view-cell">
          运费
          <span class="mui-badge">10元</span>
        </li>
        <li class="mui-table-view-cell">
          剩余优豆
          <span class="mui-badge">
            <span>可抵扣{{beansconvent}}元</span>
            <span>{{beans}}优豆</span>
          </span>
        </li>
        <li class="mui-table-view-cell">
          使用优豆
          <span class="mui-badge"> <mt-switch v-model="switchflag" @change="gettotalprice()"></mt-switch></span>
        </li>
        <li class="mui-table-view-cell">
          优豆抵扣
          <span class="mui-badge">{{beansconvent }}</span>
        </li>
      </ul>
      <div class="bottom-pay flex cart-bottom">
        <div class="left">
          总计：
          <span>{{payprice}}元</span>
        </div>
        <div class="right" @click="goPayComorder()">立即下单</div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
// 导入mui，特别注意必须先安装cnpm install babel-plugin-transform-remove-strict-mode -D，具体做法查看README.md
import mui from "../../../lib/mui/js/mui.min.js";
export default {
  data() {
    return {
      proobj: {},
      switchflag:true,
      totalprice:0,//商品总价
      express:10,//快递费
      beans:7777,
      beansconvent:0,
      payprice:0 //支付总价格
      
    };
  },
  created() {
    this.getComProinfo();
    this.getbeansconvent()
  },
  mounted() {

  },
  methods: {
    getParams() {
      return (selectedIdArr = this.$route.query.selectedId);
    },
    //获取订单信息根据传过来的skuid
    getComProinfo() {
      this.$axios({
        method: "get",
        // url:"../src/data/cart.json?id=12,13,14" 传入加入购物车的商品id
        url: "../src/data/cart.json"
      }).then(res => {
        this.proobj = res.data.data;
        this.gettotalproprice(this.proobj);
        this.gettotalprice()
      });
    },
    //计算商品的总价格
    gettotalproprice(obj){
     obj.forEach(item => {
       console.log(this.$store.getters.getGoodsCount[item.sku_id])
       this.totalprice+=item.zs_price*this.$store.getters.getGoodsCount[item.sku_id]
     });
    },
    //积分折算成现金
    getbeansconvent(){
      this.beansconvent=this.beans/1000;
    },
    //计算支付价格
    gettotalprice(){
      if(this.switchflag){
        this.payprice=this.totalprice-this.express-this.beansconvent
      }else{
        this.payprice=this.totalprice-this.express
      }
 
    },
    //下单
    goPayComorder(){
        this.$router.push({
        path: '/payOrder/',
        query: {
            payorderinfo:{
              useid:1,
              proids:this.getParams(),
              totalprice:this.payprice,
              express:this.express
              }
        }
        })
    }
  }
};
</script>
<style scoped>
.mui-media-body {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mui-table-view .mui-media-object {
  line-height: 60px;
  max-width: 60px;
  height: 60px;
}
.sku {
  font-size: 12px;
}
.num {
  float: right;
}
.price {
  display: block;
}
.mui-badge {
  background: transparent;
}
.mui-badge .mint-switch input{
 width: 100%;
}
.mui-table-view {
  font-size: 13px;
}

</style>


